<template>
    <section class="x-tab-bar">
        <cube-tab-bar :value="active">
            <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index">
                <v-touch @tap="handleClick(item)">
                    <!-- name为icon的插槽 -->
                    <div class="x-icon">
                        <svg-icon :style="getStyle(item)"
                                  :icon-class="getIcon(item)"></svg-icon>
                    </div>
                    <!-- 默认插槽 -->
                    <div class="x-text">
                        {{item.label}}
                    </div>
                </v-touch>

            </cube-tab>
        </cube-tab-bar>
    </section>
</template>

<script>
import SvgIcon from '../../components/SvgIcon';
import Auth from 'src/api/auth';

export default {
    components: { SvgIcon },
    props: {
        active: {
            type: String,
            default: '首页'
        }
    },
    data() {
        return {

        };
    },
    computed: {
        tabs() {
            /**
             * a_icon： 激活时图标
             * icon：普通图标
             */
            let tabs =  [{
                label: '首页',
                icon: 'icon-home',
                a_icon: 'icon-homefill',
                color: '#0076FF',
                url: '/home'
            }, {
                label: '公海商机',
                icon: 'icon-discover',
                a_icon: 'icon-discoverfill',
                color: '#0076FF',
                url: '/opportunities/unclaimed'
            }, {
                label: '我的业绩',
                icon: 'icon-tongji',
                a_icon: 'icon-tongji1',
                color: '#0076FF',
                url: '/performances/my'
            }, {
                label: '我的客户',
                icon: 'icon-yonghu-xianxing',
                a_icon: 'icon-yonghu',
                color: '#0076FF',
                url: '/opportunities/my'
            }];
            // 判断权限添加动态tabs
            if (Auth.getUserId() === 2) {
                tabs.push({
                    label: '我的员工',
                    icon: 'icon-yonghu-xianxing',
                    a_icon: 'icon-yonghu',
                    color: '#0076FF',
                    url: '/employees/my'
                });
            }
            return tabs;
        }
    },
    mounted() {
        this.selectedLabel = this.active;
        // 判断登陆权限，添加动态tab
    },
    methods: {

        isActive: function (item) {
            return this.active === item.label;
        },
        getStyle(item) {
            return {
                color: this.isActive(item) ? item.color : '#aaa'
            };
        },
        getIcon(item) {
            return this.isActive(item) ? item.a_icon : item.icon;
        },
        handleClick(item) {
            this.$router.push(item.url);
        }
    }
};
</script>

<style lang="scss" scoped>
    $blue : #0076ff;
.x-tab-bar {
    position:fixed;
    left:0;
    bottom:0;
    z-index: 1000;
    box-sizing: border-box;
    padding-top: 6px;
    width:100%;
    height:48px;
    background-color: white;
    font-size: 10px;
    color: #929292;
    box-shadow: 0 -1px #F0EEEE;
    .cube-tab-bar {
        height:100%;
        .x-icon {
            height:24px;
            color: #bbb;
        }
        .cube-tab {
            padding: 0;
            height:100%;
            .svg-icon-c.svg-icon {
                width: 0.48rem;
                height:0.48rem;
            }
        }
        .cube-tab-bar-slider {
            background-color: $blue;
        }
        .cube-tab_active .x-text{
            color: $blue;
        }
    }

}
</style>